<template>
    <div>
        <panle title='评论组' content="评论组"></panle>
        <!--标签-->
        <div>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="评论组" name="first">
                    <div class="first_content">
                        <!--筛选条件-->
                        <div class="shaixuan">
                            <div style="display: flex;">
                                <el-input placeholder="搜索关键词" ref="searchinput" v-model="searchinputgroup"
                                    class="input-with-select">
                                    <el-button slot="append" icon="el-icon-search" @click="searchgroup"></el-button>
                                </el-input>
                                <el-button style="margin-left: 20px;" @click="resetForm('searchinput')">重置</el-button>
                                <el-button size="mini" @click="init()" >刷新</el-button>
                            </div>
                            <el-button class="addshuziren_btn" type="danger" round
                                @click="createdYanjincigroup" size="mini" v-show="hasPermission('live:commentgroup:add')">+创建评论组</el-button>
                        </div>
                        <div class="first_table">
                            <el-row>
                                <el-col :span="24">
                                    <div class="yixuan">已选 {{ multipleSelectioncountgroup }} <el-button
                                            @click="piliangshanchugroup" type="text" v-show="hasPermission('live:commentgroup:batch_del')">批量删除</el-button></div>
                                </el-col>
                            </el-row>
                            <el-table :data="tableDatagroup" style="width: 100%;margin-bottom: 20px;" row-key="id"
                                border stripe default-expand-all v-loading="loadinggroup"
                                @selection-change="handleSelectionChangegroup">
                                <el-table-column type="selection" width="55"></el-table-column>
                                <el-table-column prop="id" label="ID" width="55"></el-table-column>
                                <el-table-column prop="name" label="评论组"></el-table-column>
                                <el-table-column prop="remark" label="备注"></el-table-column>
                                <el-table-column prop="createtime" label="创建时间"></el-table-column>
                                <el-table-column prop="id" label="操作" v-if="isShow(['live:commentgroup:edit','live:commentgroup:info','live:commentgroup:del'])">
                                    <template slot-scope="scope">
                                        <PersButton type="text" size="mini" label="编辑" icon="fa  fa-pencil"
                                            perms="live:commentgroup:edit" @click="editgroup(scope.row)"></PersButton>
                                        <PersButton type="text" size="mini" icon="fa fa-building-o" perms="live:commentgroup:info"
                                            label="详情" @click="chakangroup(scope.row)"></PersButton>
                                        <PersButton type="text" size="mini" icon="el-icon-delete" perms="live:commentgroup:del"
                                            label="删除" @click="delgroup(scope.row)"></PersButton>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <div class="block">
                                <el-pagination @size-change="handleSizeChangegroup"
                                    @current-change="handleCurrentChangegroup" :current-page="pageNumbergroup"
                                    :page-sizes="[10, 50, 100, 200]" :page-size="pageSizegroup" background
                                    layout="total, sizes, prev, pager, next, jumper" :total="totalgroup">
                                </el-pagination>
                            </div>
                        </div>
                        <!--弹出层  添加数字人-->
                        <el-dialog v-dialogDrag :visible.sync="opengroup" width="600px" append-to-body
                            :title="!formgroup.id ? '创建评论组' : '编辑评论组'">
                            <el-form ref="form" :model="formgroup" :rules="rulesgroup" label-width="80px">
                                <el-row>
                                    <el-col :span="24">
                                        <el-form-item label="评论组" prop="name">
                                            <el-input style="width:50%" v-model="formgroup.name" placeholder="请输入评论组名称"
                                                size="small" />
                                        </el-form-item>
                                    </el-col>

                                </el-row>
                                <el-row>
                                    <el-col :span="24">
                                        <el-form-item label="备注" prop="remark">
                                            <el-input style="width:50%" v-model="formgroup.remark" placeholder="请输入备注"
                                                size="small" />
                                        </el-form-item>
                                    </el-col>

                                </el-row>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="opengroup = false" size="small">取 消</el-button>
                                <el-button type="primary"
                                    @click="!formgroup.id ? submitFormgroup('form') : subEditFormgroup('form')"
                                    size="small">确 定</el-button>
                            </div>

                        </el-dialog>


                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>

import Panle from '@/components/Panle';
import PersButton from '@/components/PersButton';
import { getCommentGroup, createCommentGroup, delCommentGroup, editCommentGroup, pldelCommentGroup } from '@/api/live/commentGroup';
import commentGroupList from '@/views/live/commentgroup/info';
import { hasPermission,isShow } from '@/common/permission'

export default {
    components: {
        Panle,
        PersButton,
        commentGroupList
    },
    data() {
        return {
            loadinggroup: false,
            tableDatagroup: [],
            multipleSelectioncountgroup: 0,
            multipleSelectiongroup: [],
            pageSizegroup: 10, //一页显示多少条
            pageNumbergroup: 1,
            totalgroup: 0, //总页数
            searchinputgroup: '',
            fileList2: [],
            flagid2: '',
            filelist: [],
            dialogVisible: false,
            disabled: false,
            activeName: 'first',
            open2: false,
            commentOpen: false,
            opengroup: false,
            formgroup: {
                "id": '',
                "name": "",
                "remark": '',
            },
            rulesgroup: {

                name: [{
                    required: true,
                    message: "评论组不能为空",
                    trigger: "blur"
                }]
            },

            clickType: false,
            imgnum: 1, //选择图片数量
        }
    },
    created() {
        this.init2();
    },
    methods: {
        hasPermission,
        isShow,
        resetForm(formName) {
            this.searchinputgroup = '';
            this.init2();
        },
        init() {
            this.init2();
        },
        handleClick(tab, event) {
        },
        init2: function () {
            this.loadinggroup = true;
            let _param = {
                "size": this.pageSizegroup,
                "page": this.pageNumbergroup,
                "input": this.searchinputgroup,
            }
            getCommentGroup(_param).then((res) => {
                this.tableDatagroup = res.data.list;
                this.totalgroup = res.data.total;
                this.loadinggroup = false;
            })
        },
        searchgroup: function () {
            this.searchinputgroup = this.searchinputgroup;
            this.init2();
        },
        handleSizeChangegroup: function (e) {
            this.pageSizegroup = e;
            this.init2();
        },
        handleCurrentChangegroup: function (e) {
            this.pageNumbergroup = e;
            this.init2();
        },
        //已选
        handleSelectionChangegroup: function (e) {
            let selectChang = []
            for (let item of e) {
                selectChang.push(item.id)

            }
            this.multipleSelectiongroup = selectChang;
            this.multipleSelectioncountgroup = selectChang.length;
        },
        //创建表单
        createdYanjincigroup: function (e) {
            this.formgroup = {
                "id": '',
                "name": '',
                "remark": "",
            },
                this.opengroup = true;
        },
        //提交表单  创建 
        submitFormgroup: function (e) {
            createCommentGroup(this.formgroup).then((res) => {
                if (res.code == 200) {
                    this.msgSuccess(res.msg);
                    this.init2();
                    this.opengroup = false;
                } else {
                    this.msgError(res.msg);
                }
            })


        },
        subEditFormgroup: function (e) {
            editCommentGroup(this.formgroup).then((res) => {
                if (res.code == 200) {
                    this.msgSuccess(res.msg);
                    this.init2();
                    this.opengroup = false;
                } else {
                    this.msgError(res.msg);
                }
            })
        },

        delgroup: function (data) {
            this.$confirm('确定删除【' + data.name + '】数字人类型吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let _param = {
                    'id': data.id
                }
                delCommentGroup(_param).then((res) => {
                    if (res.code == 200) {
                        this.msgSuccess(res.msg);
                        this.init2();
                    } else {
                        this.msgError(res.msg);
                    }
                })


            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        editgroup: function (data) {

            this.formgroup.id = data.id;
            let editForm = {
                "id": data.id,
                "name": data.name,
                "remark": data.remark,

            }
            Object.assign(this.formgroup, editForm);
            this.opengroup = true;
        },
        //批量删除
        piliangshanchugroup: function (e) {
            this.$confirm('确定批量删除选中的数字人类型吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let _param = {
                    'ids': this.multipleSelectiongroup
                }
                pldelCommentGroup(_param).then((res) => {
                    if (res.code == 200) {
                        this.msgSuccess(res.msg);
                        this.init2();
                    } else {
                        this.msgError(res.msg);
                    }
                })


            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        chakangroup: function (e) {
            this.$router.push({ path: '/live/info', query: { id: e.id } });
        },

    }
}

</script>

<style lang="scss" scoped>
@import "@/assets/css/common.scss";

.el-select .el-input {
    width: 130px;
}

.input-with-select .el-input-group__prepend {
    background-color: #fff;
}

.shaixuan {
    display: flex;
    flex-flow: nowrap;
    align-content: center;
    margin-top: 15px;
}

.first_content {
    display: flex;
    flex-flow: nowrap;
    flex-direction: column;
    align-content: center;
}

.uploadcol {
    display: flex;
    flex-flow: column;
    width: 100px;
}

.uploadborder {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    /* cursor: pointer;
      position: relative;
      overflow: hidden; */
    width: 100px;
    height: 100px;
}

.addshuziren_btn {
    position: absolute;
    right: 0;
    margin-right: 20px;
}

.daorushuziren_btn {
    position: absolute;
    right: 0;
    margin-right: 160px;
}

.yixuan {
    margin: 20px;
    color: #787878;
}
</style>